<template>
<!--    //用户信息-->
    <div><router-link to="/index2">返回首页</router-link></div>
    <div style="height: 192px;width: 1305px;border-bottom: 1px solid red;padding-top:10px;display: flex">
        <div style="height: 80px; width: 735px;display: flex;margin-top: 110px;margin-left: 10px">
            <div>
                <el-image
                        style="width: 60px; height: 60px;border-radius:50%;border: 1px solid #cccccc "
                        :src="user.avatar"
                >
                </el-image>
            </div>
            <div style="margin-left: 11px">
                <div style="font-size: 25px">{{user.nickName}}</div>
                <div>{{user.signature}}</div>
            </div>
            <button @click="handleEdit()" style="height: 20px">修改个人信息</button>
        </div>
        <div style="margin-left: 400px"><img src="../../assets/Elogo.png"></div>
    </div>
<!--    //导航栏-->
    <div style="border-bottom: 1px solid red;height: 66px;width: 1305px;display: flex;text-align: center;">
        <div class="navigation_div" @click="">
            <img src="../../assets/收藏图标.png">
            <span>我的收藏</span>
        </div>
        <div class="navigation_div" @click="reload">
            <img src="../../assets/上传图标.png">
            <span>我上传的</span>
        </div>
        <div class="navigation_div" @click="blogload">
            <span>我的博客</span>
        </div>
        <div style="margin-left:70%;display: flex;align-items: center;"><router-link to="/blog">管理后台</router-link></div>
    </div>
<!--    //显示区-->
    <div v-for="item in tableData">
        <div v-if="myactive=='recource'">
            <div v-if="item.author === user.username">
                资源名：{{item.name}}
                上传时间：{{item.createTime}}
                审核状态：{{item.state}}
            </div>
        </div>
        <div v-else-if="myactive=='blog'">
            <div v-if="item.author === user.username">
                标题：{{item.title}}
                内容：{{item.content}}
                收藏人数：{{item.peopleNumber}}
            </div>
        </div>
    </div>

<!--    //个人信息修改弹窗-->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
        <el-form :model="form" label-width="120px">
            <el-form-item label="用户名">
                <el-input v-model="form.username" style="width: 80%"/>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="form.nickName" style="width: 80%"/>
            </el-form-item>
            <el-form-item label="个性标签">
                <el-input v-model="form.signature" style="width: 80%"/>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="form.age" style="width: 80%"/>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="form.sex" label="男" size="large">男</el-radio>
                <el-radio v-model="form.sex" label="女" size="large">女</el-radio>
                <el-radio v-model="form.sex" label="未知" size="large">未知</el-radio>
            </el-form-item>
            <el-form-item label="地址">
                <el-input type="textarea" v-model="form.address" style="width: 80%"/>
            </el-form-item>
        </el-form>
        <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="save">确认</el-button>
                    </span>
        </template>
    </el-dialog>
</template>

<script>
    import request from "../../utils/request";

    export default {
        name: "UserInformation",
        data(){
            return{
                user: JSON.parse(sessionStorage.getItem("user")),
                currentPage:1,         //记录当前页
                pageSize:10,
                myactive:'',
                total:0,
                form:{},
                dialogVisible:false,    //修改个人信息弹窗控制变量
                tableData: [],
                Vis:false,
            }
        },
        methods:{
            blogload(){
                request.get("/blog",{
                    params:{
                        pageNum:this.currentPage,
                        pageSize:this.pageSize,
                        search:this.user.name,
                    }
                }).then(res => {
                    console.log(res)
                    this.myactive='blog'
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            reload(){     //刷新页面获取数据
                request.get("/resource",{
                    params:{
                        pageNum:this.currentPage,
                        pageSize:this.pageSize,
                        search:this.user.name,
                    }
                }).then(res => {
                    console.log(res.data)
                    this.myactive='recource'
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            handleEdit(){
                this.form = this.user
                this.dialogVisible = true   //控制变量，以控制表单是否显示
            },
            save(){
                request.put("/user", this.form).then(res => { //请求，并传参数。 then是Es6语法用于获取后台返回结果。
                    console.log(res)            //浏览器打印res
                    if (res.code === '0') {       //判断是否成功
                        this.$message({//输出提示，用element提供的方法$message
                            type: "success",
                            message: "修改成功啦"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                    this.user = this.form
                    this.dialogVisible = false  //关闭弹窗
                })
            }
        }
    }
</script>

<style scoped>
 .navigation_div{
    margin-left: 10px;
     display: flex;
     align-items: center;
 }
 .navigation_div img {
     height: 30px;
 }
</style>